<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css box model</title>
  <link rel="stylesheet" href="css/box.css">
</head>

<body>
  <!-- 页面布局三大核心：盒子模型/浮动/定位 -->
  <div class="margin">
    <div class="border">
      <div class="padding">
        <div class="content"></div>
      </div>
    </div>
  </div>
  <h3>示意：</h3>
  <div>
    <span>margin</span>
    <span>border</span>
    <span>padding</span>
    <span>content</span>
  </div>
  <h3>盒子模型：边框</h3>
  <p>
    <code>
        border : border-width | border-style | border-color
    </code>
  </p>
  <p>
    <code>
        border-collapse : collapse 相邻边框合并
    </code>
  </p>
  <div class="box-border1"></div>
  <div class="box-border2">边框会影响盒子的实际大小</div>
  <h3>盒子模型：内边距</h3>
  <div class="box-padding">内边距会影响盒子的实际大小</div>
  <h3>盒子模型：外边距</h3>
  <!-- 外边距典型应用：使块级盒子水平居中，但必须有两个前提：1.盒子指定宽度；2.左右外边距设置为auto！ -->
  <div class="box-margin1"><span>外边距1</span></div>
  <div class="box-margin2"><img src="img/milogo.png"></div>
  <!-- 外边距合并：使用margin定义块元素的外边距时，可能出现外边距的合并 -->
  <!-- 1.嵌套块元素垂直外边距的塌陷 -->
  <!-- 解决方式：1.为父元素定义上边框 2.为父元素定义上内边距 3.为父元素添加 overflow：hidden 属性 4.其他方法：浮动、固定，绝对定位的盒子不会塌陷-->
  <hr>
  <div class="father">
    <div class="son"></div>
  </div>
  <!-- 2.清除内外边距 -->
  <!-- html元素本身会自带默认的内外边距，且不同浏览器解析不同，所以在布局前，需要清除内外边距 -->
  <!-- 注意行内元素只设置左右内外边距，不设置上下的，设置了也不会生效，除非转换为块级或者行内块元素 -->
  <span>注意行内元素只设置左右内外边距，不设置上下的</span>
  <span class="span-block">除非转换为块级或者行内块元素</span>
</body>

</html>